<template>
  <div id="app">
    <!--header-->
    <el-header height="36px">
      <!--<span>Header</span>-->
      <el-row>
        <el-col :span="12">
          <i class="el-icon-s-comment">
            <span style="font-size: 13px; text-align: center"> 欢迎来到工艺品商城</span>
          </i>
        </el-col>

        <el-col :span="12">
          <el-menu
            class="el-menu-demo"
            mode="horizontal"
            active-text-color="#FF3030"
            :router="true"
          >
            <el-menu-item v-if="showLogin">
              <span style="color: #999">欢迎来到工艺品商城 </span>
              <template >
                <a
                  style="color: #ff3030; text-decoration: none"
                  @click="loginVisible = true"
                >
                  登录
                </a>
                /
                <router-link
                  to="/register"
                  style="color: #ff3030; text-decoration: none"
                >
                  注册
                </router-link>
              </template>
            </el-menu-item>
            <el-menu-item  index="/" >商城首页</el-menu-item>
            <el-menu-item  index="/order" >我的订单</el-menu-item>
            <el-menu-item  index="/center" >个人中心</el-menu-item>
            <el-menu-item  index="/cart" >
              <i class="el-icon-shopping-cart-2"></i>
              <span slot="title" >购物车</span>
            </el-menu-item>
            <el-menu-item  @click="logout" v-if="!showLogin">
              <span>退出</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
    </el-header>

    <section>
      <nav class="app__nav">
        <div class="logo" @click="toHome">
          <el-image :src="logoUrl" alt="logo" :fit="fit" style="width: 70px; height: 50px" />
        </div>
        <ul class="links">
          <li v-for="(item, i) in menu" :key="i" @click="to(item.name)">
            {{ item.label }}
          </li>
        </ul>
        <search />
      </nav>
    </section>

    <!--main-->
    <router-view />

    <!--footer-->
    <footer>
      <div class="footer">
        <section class="footer__info">
          <div>
            <div>logo</div>
            <a>官方网站：www.sitong.space</a>
            <a>开源官网：www.sitong.space</a>
          </div>
        </section>
        <section class="footer__desc">
          <ul class="list" v-for="(list, key) in footerDesc" :key="key">
            <p class="list__title">{{ list.title }}</p>
            <li class="list__item" v-for="(item, i) in list.children" :key="i">
              {{ item }}
            </li>
          </ul>
        </section>
      </div>
    </footer>

    <login :visible.sync="loginVisible" @login-success="showLogin = false" />
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from '@vue/composition-api';
import Login from '../../components/Login.vue';
import Search from '../../components/Search.vue';
import { useNav } from '../../hooks';
import { RouterMap } from '../../utils/constants';
import {removeToken, removeUser} from "../../utils/baseinfo";
import { Message } from 'element-ui';

const footerDesc = [
  {
    title: '服务保障',
    children: ['正品保证', '7天无理由退换', '7*8小时客户服务'],
  },
  {
    title: '支付方式',
    children: ['线上支付', '货到付款', '线下付款'],
  },
  {
    title: '会员服务',
    children: ['免费注册', '找回密码', '个人中心'],
  },
  {
    title: '物流服务',
    children: ['商品免邮', '快递配送', 'EMS'],
  },
];

const menu = [
  { label: '首页', name: RouterMap.Home },
  { label: '商品列表', name: RouterMap.Goods },
  { label: '新品推荐', name: RouterMap.News },
];

export default defineComponent({
  components: { Login, Search },
  setup(props, context) {
    const loginVisible = ref(false);
    const { to, toHome } = useNav(context);
    const logoUrl = 'https://www.logo123.com/logos/2018/08/18/2018081808444110100.png'
    const fit = 'fill'
    const showLogin = ref(true);

    const logout = () => {
      removeUser();
      removeToken();
      Message.success("成功退出");
      showLogin.value = true;
      to(RouterMap.Home);
    };

    onMounted(() => {
      if (localStorage.getItem('token')) {
        showLogin.value = false;
      }

      window.events.on('remove-item', (name) => {
        if (name === 'token') {
          showLogin.value = true;
        }
      });
    });

    return {
      loginVisible,
      footerDesc,
      menu,
      to,
      toHome,
      logoUrl,
      fit,
      logout,
      showLogin
    };
  },
});
</script>

<style lang="less">
ul,
li {
  list-style: none;
}

* {
  margin: 0px;
  padding: 0px;
}

.el-menu,
.el-header {
  background-color: #f7f7f7 !important;
}

.el-menu.el-menu--horizontal {
  border-bottom: 0px !important;
}

.el-icon-s-comment {
  padding-right: 200px;
}

.el-menu--horizontal > .el-menu-item {
  height: 36px !important;
  line-height: 36px !important;
  font-size: 13px;
  color: #999;
  border-bottom: none !important;
}

.el-header {
  text-align: center;
  line-height: 36px;
}

footer {
  background: #222222;
  .footer {
    width: 1200px;
    color: #666;
    padding: 2rem 0;
    margin: 0 auto;

    display: flex;
    justify-content: center;

    &__info {
      display: flex;
      > div {
        display: flex;
        flex-direction: column;

        padding-right: 4rem;
        a {
          margin-top: 0.5rem;
          font-size: 0.8rem;
        }
      }

      &::after {
        content: '';
        display: inline-block;
        height: 100%;
        width: 1px;
        background: #666;
      }
    }
    &__desc {
      display: flex;
      .list {
        margin-left: 6rem;
        font-size: 0.8rem;
        &__title {
          font-size: 1rem;
        }
        &__item {
          margin-top: 10px;
        }
      }
    }
  }
}

.app__nav {
  width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
  display: flex;
  align-items: center;
  .logo {
    margin-right: auto;
    cursor: pointer;
  }
  .links {
    display: flex;
    align-items: center;
    > li {
      margin-left: 1.5rem;
      cursor: pointer;
      transition: color 0.3s;
      &:hover {
        color: rgb(255, 48, 48);
        transition: color 0.3s;
      }
    }
  }
  .search {
    margin-left: 3rem;
  }
}
</style>
